<!DocType html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

    </script>
</head>
<body>


<div id="app">
    <todo-item v-for="item in items" v-bind:todo='item'></todo-item>
    <p>
        {{reverseMessage}}
    </p>
</div>


<div id="app1" class="static" v-bind:class="classObj">

</div>

<div id="app2">
    <input v-model="message" placeholder="usename">
    <p>message is:{{message}}</p>
</div>

<script>

    let vm2 = new Vue({
        el:'#app2',
        data:{
            message:''
        }
    })

    let vm1 = new Vue({
        el:'#app1',
        data: {
            isActive:true,
            error:null
        },
        computed: {
            classObj:function () {
                return {
                    active:this.isActive ,
                    'text-danger': this.error
                }
            }
        }
    })

    // Vue.component('todo-item', {
    //     props: ['todo'],
    //     template: '<li>{{todo.text}}</li>'
    // })

    let componetA = {
        props: ['todo'],
        template: '<li>{{todo.text}}</li>'
    }

    let vm = new Vue({
        el: '#app',
        components:{
            'todo-item':componetA
        },
        data: {
            items: [
                {text: 'text1'},
                {text: 'text2'},
                {text: 'text3'}
            ],
            message:'Hello Vue!'
        },
        computed:{
            reverseMessage:function () {
                return this.message.split('').reverse().join('')
            }
        },
        watch:{
          message: function (newVal,oldVal) {
              console.log('watch message: ' + oldVal + ' ' + newVal);
          }
        },
        created: function () {
            console.log('vue created');
        },
        beforeCreate: function () {
            console.log('vue before created');
        },
        beforeMount: function () {
            console.log('vue beforeMount');
        },
        mounted: function () {
            console.log('vue mounted');
        },
    })

</script>

</body>
</html>